<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        .layui-table tr{
            height: 52px;
        }
        .layui-table-cell{
            height: 52px;
        }

        .upload-item,.edit-item {
            position: relative;
            display: inline-block;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        .upload-img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border: 1px solid #ccc;
            cursor: pointer;
        }
        .upload-input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }
        .upload-item input[type="checkbox"],.edit-item input[type="checkbox"] {
            position: absolute;
            bottom: 5px;
            right: 5px;
        }
        .upload-item .delete-btn ,.edit-item .delete-btn{
            position: absolute;
            top: 5px;
            right: 5px;
            background: rgba(255,255,255,0.7);
            border: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            cursor: pointer;
            color: #ff0000;
            font-weight: bold;
        }
            .layui-btn-sm {
                padding: 1px ;
                font-size: 12px;
            }

    </style>
</head>
<body>
<!--数据列表-->
<table class="layui-table" lay-data="{url:'product/list', page:true, id:'datalist',toolbar:'#toptools'}" lay-filter="datalist">
    <thead>
    <tr>
        <th lay-data="{field:'id',}">ID</th>
        <th lay-data="{field:'name'}">名称</th>
        <th lay-data="{field:'description'}">详情</th>
        <th lay-data="{field:'price'}">价格</th>
        <th lay-data="{field:'stock'}">库存</th>
        <th lay-data="{templet:'#imgTpl'}">图片</th>
        <th lay-data="{templet:'#parentTpl'}">分类</th>
        <th lay-data="{field:'created_at'}">创建时间</th>
        <th lay-data="{field:'updated_at'}">更新时间</th>
        <th lay-data="{toolbar:'#putOntools'}">上架状态</th>
        <th lay-data="{toolbar:'#linetools'}">操作</th>
    </tr>
    </thead>
</table>
<!--图片列自定义模板-->
<script type="text/html" id="imgTpl">
    {{# console.log(d);for (var i = 0; i < d.imgurl.length; i++) { }}
    {{# if (d.imgurl[i].is_main === 1) { }}
    <img src="{{d.imgurl[i].imgurl}}" style="height: 50px; width: 50px;">
    {{# } }}
    {{# } }}
</script>
<!--父级分类自定义模板-->
<script type="text/html" id="parentTpl">
    {{#  if(d.category_id1==-1){ }}
    <span style="color: red;">顶级</span><span>;{{d.category2.name}}</span>
    {{# }else{ }}
    <span style="">{{ d.category1.name }};{{d.category2.name}}</span>
    {{# } }}
</script>
<!--父级分类自定义模板-->
<script id="putOntools" type="text/html">
    {{#  if(d.state==0){ }}
    <button type="button" class="layui-btn-sm layui-btn-radius " lay-event="putOff" >上架中</button>
    {{# }else{ }}
    <button type="button" class="layui-btn-sm layui-btn-radius " lay-event="putOn" >已下架</button>
    {{# } }}
</script>


<!--新增数据表单-->
<div style="display:none" id="addWin" lay-filter="addWin" class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">一级分类</label>
        <div class="layui-input-inline">
            <select name="category_id1"  lay-filter="firstCategory">
                
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">二级分类</label>
        <div class="layui-input-inline">
            <select  name="category_id2">
                
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-inline">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">详情描述</label>
        <div class="layui-input-inline">
            <input type="text" name="description" required lay-verify="required" placeholder="请输入文字" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">价格</label>
        <div class="layui-input-inline">
            <input type="number" name="price" required lay-verify="required" placeholder="请输入价格" autocomplete="off" class="layui-input" min="0">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">库存</label>
        <div class="layui-input-inline">
            <input type="number" name="stock" required lay-verify="required" placeholder="请输入库存数量" autocomplete="off" class="layui-input" min="1">
        </div>
    </div>

<!--实现图片上传-->
    <div class="layui-form-item">
        <label class="layui-form-label">图片</label>
        <div class="layui-input-block" name="image-container">

        </div>
    </div>
    <!-- 添加图片按钮 -->
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" name="add-image">添加图片</button>
        </div>
    </div>
<!--    新增和编辑栏的按钮-->
    <div class="layui-form-item"  style="text-align: center;">
        <button  type="button" lay-submit lay-filter="addsave"  class="layui-btn " id="addsave" >上架</button>
        <button type="button"  class="layui-btn " id="addcancel">取消</button>
    </div>
</div>
<!--修改对话框-->
<div style="display:none" id="editWin" lay-filter="editWin" class="layui-form">
    <input name="id" type="hidden">
    <div class="layui-form-item">
        <label class="layui-form-label">一级分类</label>
        <div class="layui-input-inline">
            <select name="category_id1"  lay-filter="firstCategory">

            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">二级分类</label>
        <div class="layui-input-inline">
            <select name="category_id2">

            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-inline">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">详情描述</label>
        <div class="layui-input-inline">
            <input type="text" name="description" required lay-verify="required" placeholder="请输入文字" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">价格</label>
        <div class="layui-input-inline">
            <input type="number" name="price" required lay-verify="required" placeholder="请输入价格" autocomplete="off" class="layui-input" min="0">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">库存</label>
        <div class="layui-input-inline">
            <input type="number" name="stock" required lay-verify="required" placeholder="请输入库存数量" autocomplete="off" class="layui-input" min="1">
        </div>
    </div>

    <!--实现图片上传-->
    <div class="layui-form-item">
        <label class="layui-form-label">图片</label>
        <div class="layui-input-block" name="image-container">

        </div>
    </div>
    <!-- 添加图片按钮 -->
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" name="edit-image">添加图片</button>
        </div>
    </div>
    <div class="layui-form-item"  style="text-align: center;">
        <button  type="button" lay-submit lay-filter="editsave"  class="layui-btn" >保存</button>
        <button type="button"  class="layui-btn " id="editcancel">取消</button>
    </div>
</div>



<!--行内工具栏-->
<script id="linetools" type="text/html">
    <button  type="button"  class="layui-btn-sm layui-btn-radius " lay-event="edit" >编辑</button>
    <button type="button"  class="layui-btn-sm layui-btn-radius " lay-event="delete">删除</button>
</script>
<!--头部工具栏-->
<script id="toptools" type="text/html">
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <input type="text" name="text"  placeholder="请输入查询内容" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline">
            <button type="button"  class="layui-btn layui-btn-radius" lay-event="check">查询</button>
            <button type="button"  class="layui-btn layui-btn-radius" lay-event="add">新增</button>
        </div>
    </div>
</script>
<script src="layui/layui.all.js"></script>
<script>
    // 从 layui 中引入 jQuery 对象，方便后续使用 jQuery 相关方法操作 DOM
    const $ = layui.$;
    // 从 layui 中引入表格模块，用于处理表格相关操作，如表格数据加载、刷新等
    const table = layui.table;
    // 从 layui 中引入表单模块，用于处理表单数据的获取、验证、填充等操作
    const form = layui.form;
    // 从 layui 中引入弹出层模块，用于创建各种类型的弹出层，如确认框、提示框等
    const layer = layui.layer;
    // 从 layui 中引入文件上传模块，用于处理文件上传功能
    const upload = layui.upload;

    var MAX_IMAGES = 5; // 最大上传数量

    //上传图片到某个位置upload
    function bindUploadEvent(newItem) {
        // 先解除已有的上传事件绑定
        newItem.find('.upload-input').off('click');
        upload.render({
            elem: newItem.find('.upload-input'),
            url: 'file/uploadSystemProductImg', // 替换为你的上传接口地址
            multiple: false,
            done: function(result) {
                if (result.code == 0) {
                    const imgElem = $(this.elem).siblings('.upload-img');
                    imgElem.attr('src', result.data[0].src);
                    const imgInput = $(this.elem).siblings('.upload-input');
                    imgInput.val(result.data[0].src);

                } else {
                    layer.msg(result.msg || '上传失败');
                }
            },
            error: function() {
                layer.msg('上传出错');
            }
        });
    }

    $(document).ready(function() {
        $("[name='add-image']").on('click', function() {

            var currentImages = $('.upload-item').length;


            if (currentImages >= MAX_IMAGES) {
                layer.msg('最多只能上传5张图片');
                return;
            }
            var newItemIndex = currentImages;
            var newItem = `
        <div class="upload-item" data-id="${newItemIndex}">
            <img src="shopfile/img/icon/uploadimg.png" class="upload-img"  data-id="${newItemIndex}">
            <input type="file" name="file" class="upload-input" lay-verify="shopimg">
            <input type="checkbox" name="ismain" value="0" title="设为主要图片" lay-filter="mainimg">
            <button type="button" class="delete-btn">×</button>
        </div>
    `;
            const $newItem = $(newItem);
            $("#addWin [name='image-container']").append($newItem);
            form.render(); // 重新渲染表单元素
            bindUploadEvent($newItem);
        });
        $("[name='edit-image']").on('click', function() {


            var currentImages = $('.edit-item').length;


            if (currentImages >= MAX_IMAGES) {
                layer.msg('最多只能上传5张图片');
                return;
            }
            var newItemIndex = currentImages;
            var newItem = `
        <div class="edit-item" data-id="${newItemIndex}">
            <img src="shopfile/img/icon/uploadimg.png" class="upload-img"  data-id="${newItemIndex}">
            <input type="file" name="file" class="upload-input" lay-verify="editimg">
            <input type="checkbox" name="ismain" value="0" title="设为主要图片" lay-filter="mainimg">
            <button type="button" class="delete-btn">×</button>
        </div>
    `;

            const $newItem = $(newItem);

            $("#editWin [name='image-container']").append($newItem);
            form.render(); // 重新渲染表单元素
            bindUploadEvent($newItem);
        });
    });


   // 图片点击事件，触发文件选择
    $("[name='image-container']").on('click', '.upload-img', function(){
        $(this).siblings('.upload-input').click();
    });


    // 删除图片功能
    $("[name='image-container']").on('click', '.delete-btn', function(){
        var total = $('.upload-item').length;
        $(this).parent('.upload-item').remove();
        form.render(); // 重新渲染表单元素
    });

    // 删除图片功能
    $("[name='image-container']").on('click', '.delete-btn', function(){
        var total = $('.edit-item').length;
        $(this).parent('.edit-item').remove();
        form.render(); // 重新渲染表单元素
    });

    // 设置主要图片（单选）
    form.on('checkbox(mainimg)', function(data){
        if(data.elem.checked){
            // 找到当前复选框的父元素
            const $parent = $(this).closest("[name='image-container']");
            // 取消其他所有主要图片的选中状态
            $parent.find('input[name="ismain"]').not(this).prop('checked', false).next('.layui-form-checkbox').removeClass('layui-form-checked');
            // 将未选中的 ismain 的 value 设为 0
            $parent.find('input[name="ismain"]').not(this).val(0);
            // 将当前选中的 ismain 的 value 设为 1
            $(this).val(1);
            // 更新 UI，确保只有当前选中的复选框有选中样式
            form.render('checkbox');
        } else {
            // 如果取消勾选，将其 value 设为 0
            $(this).val(0);
        }
    });


    /* 监听表格行内按钮的点击事件，tool是预定义的，当点击带有 lay-event 属性的按钮时触发 */
    table.on("tool(datalist)", function (obj) {
        // 获取被点击按钮的 lay-event 属性值，用于判断点击的是哪个按钮
        var event = obj.event;
        // 获取被点击按钮所在行的数据，包含该行的所有字段信息
        var data = obj.data;
        // 判断点击的按钮是否为删除按钮
        if (event === 'delete') {
            // 弹出确认框，防止用户误操作，询问用户是否确认删除
            layer.confirm("确认要删除吗?", function () {
                // 当用户点击确认后，执行以下代码
                $.ajax({
                    // 发送删除请求的 URL，这里是删除分类的接口
                    url: 'product/delete',
                    // 发送的数据，包含要删除的分类的 ID
                    data: { id: data.id },
                    // 请求成功后的回调函数
                    success: function () {
                        // 弹出提示信息，告知用户删除成功，显示 1800 毫秒，图标为 1 表示成功
                        layer.msg("删除成功", { time: 1800, icon: 1 });
                        // 刷新表格数据，并将表格显示到第一页
                        table.reload("datalist", { page: { curr: 1 } });
                    }
                });
            });
        }
        else if (event === 'edit') {

            form.val("editWin", data)

           // 清空图片容器
            $("[name='image-container']").empty();

            // 遍历商品的图片数组并添加到图片容器中
            if (data.imgurl && data.imgurl.length > 0) {
                data.imgurl.forEach((image, index) => {
                    var newItem = `
                <div class="edit-item" data-id="${index}">
                    <img src="${image.imgurl}" class="upload-img"  data-id="${index}">
                    <input type="file" name="file" class="upload-input" lay-verify="editimg">
                    <input type="checkbox" name="ismain" value="${image.is_main}" title="设为主要图片" lay-filter="mainimg" ${image.is_main === 1 ? 'checked' : ''}>
                    <button type="button" class="delete-btn">×</button>
                </div>
            `;
                    const $newItem = $(newItem);
                    $("#editWin [name='image-container']").append($newItem);
                    form.render(); // 重新渲染表单元素
                    bindUploadEvent($newItem);
                });
            }



            // 调用  showitems 函数，获取所有一级、对应的二级分类信息并填充到下拉框中
            showitems(-1,"[name='category_id1']");
            var secondCategoryId = $("[name='category_id1']").val();
            showitems(secondCategoryId,"[name='category_id2']");
            // 弹出新增分类的弹出层，类型为页面层，设置标题、宽高和内容
            layer.open({
                type: 1,
                title: '编辑商品',
                area: ['400px', '400px'],
                content: $("#editWin")
            });
        }
        else if (event === 'putOn') {
            layer.confirm("确认要上架该商品吗?", function () {
                $.ajax({
                    url: 'product/putOn',
                    data: { id: data.id },
                    success: function () {
                            layer.msg("上架成功", { time: 1800, icon: 1 });
                            table.reload("datalist", { page: { curr: 1 } });
                    }
                });
            });
        } else if (event === 'putOff') {
            layer.confirm("确认要下架该商品吗?", function () {
                $.ajax({
                    url: 'product/putOff',
                    data: { id: data.id },
                    success: function () {
                            layer.msg("下架成功", { time: 1800, icon: 1 });
                            table.reload("datalist");
                    }
                });
            });
        }
    });

    // 查询出所有的一级分类，并将一级分类的信息添加到下拉框中
    function getChildren(id) {
        var datalist;
        $.ajax({
            // 发送获取一级分类信息的请求的 URL
            url: "category/getChildren",
            // 发送的数据，请求 ID   的分类信息，通常 -1 表示顶级分类
            data: { id: id },
            async:false,
            // 请求成功后的回调函数，result 为服务器返回的数据
            success: function (result) {

                datalist = result;
            }
        });
        return datalist;
    }
    function showitems(id,element){
        var datalist = getChildren(id);
        var $elem = $(element);
        $elem.empty();
        // 在控制台打印服务器返回的数据，方便调试
        /* console.log(result);*/
        // 用于存储去重后的分类信息
        const uniqueCategorise = [];
        // 用于存储分类名称的集合，利用 Set 的特性实现去重
        const nameSet = new Set();
        // 遍历服务器返回的分类信息
        datalist.forEach(category => {
            // 判断当前分类名称是否已经存在于集合中
            if (!nameSet.has(category.name)) {
                // 如果不存在，则将该分类名称添加到集合中
                nameSet.add(category.name);
                // 将该分类信息添加到去重后的数组中
                uniqueCategorise.push(category);
            }
        });
        // 遍历服务器返回的分类信息，将每个分类信息添加到下拉框中
        for (var i = 0; i < uniqueCategorise.length; i++) {
            $elem.append("<option value='" + uniqueCategorise[i].id + "'>" + uniqueCategorise[i].name + "</option>");
        }
        // 重新渲染下拉框，使新添加的选项生效
        form.render('select');
    }
    //监听一级分类改变事件
    form.on('select(firstCategory)',function(data){
        var val = data.value;
        showitems(val,"[name='category_id2']");
    })


    /* 监听表格头部工具栏按钮的点击事件，当点击带有 lay-event 属性的按钮时触发 */
    table.on("toolbar(datalist)", function (obj) {
        // 获取被点击按钮的 lay-event 属性值，用于判断点击的是哪个按钮
        var event = obj.event;
        // 判断点击的按钮是否为新增按钮
        if (event === 'add') {
            // 设置表单默认值
            $('#addWin [name="name"]').val('');
            $('#addWin [name="description"]').val('');
            $('#addWin [name="price"]').val('');
            $('#addWin [name="stock"]').val('');
            // 清空图片容器
            $("[name='image-container']").empty();

            // 调用  showitems 函数，获取所有一级、对应的二级分类信息并填充到下拉框中
            showitems(-1,"[name = 'category_id1']");
            var secondCategoryId = $("[name='category_id1']").val();
            showitems(secondCategoryId,"[name = 'category_id2']");
            // 弹出新增分类的弹出层，类型为页面层，设置标题、宽高和内容
            layer.open({
                type: 1,
                title: '新增商品',
                area: ['400px', '400px'],
                content: $("#addWin")
            });
        }
        // 判断点击的按钮是否为查询按钮
        else if (event === 'check') {
            // 获取输入框中的查询内容
            var text = $("[name='text']").val();
            // 重新加载表格数据，将查询内容作为参数传递给后端，并将表格显示到第一页
            table.reload("datalist", { where: { 'text': text }, page: { curr: 1 } });
            // 将输入框中的查询内容重新赋值，确保输入框内容不变
            $("[name='text']").val(text);
        }
    });

    // 监听新增表单的提交事件，当点击新增表单的保存按钮时触发
    form.on("submit(addsave)", function (data) {
        // 验证是否上传了图片
        const uploadItems = $('.upload-item');
        if (uploadItems.length === 0) {
            layer.msg("必须上传图片");
            return false;
        }

        // 提取表单中的基本数据
        const formData = data.field;
        const name = formData.name;

        const description = formData.description;
        const price = formData.price;
        const stock = formData.stock;
        const category_id1 = formData.category_id1;
        const category_id2 = formData.category_id2;

        // 整理图片数据
        const imgUrls = [];
        uploadItems.each(function () {
            const imgSrc = $(this).find('.upload-img').attr('src');
            const isMain = $(this).find('input[name="ismain"]').val();
            imgUrls.push({
                imgurl: imgSrc,
                is_main: parseInt(isMain)
            });
        });


        // 构造最终要发送的数据对象
        const finalData = {
            name: name,
            description: description,
            price: price,
            stock: stock,
            category_id1: category_id1,
            category_id2: category_id2,
            imgurl: imgUrls
        };


        // 发送 AJAX 请求，将表单数据提交到服务器的新增分类接口
        $.ajax({
            url: 'product/add',
            type:'POST',
            data: JSON.stringify(finalData), // 将数据转换为 JSON 字符串
            contentType: 'application/json', // 设置请求头为 JSON 格式
            success: function (result) {
                // 关闭所有弹出层
                layer.closeAll();
                // 弹出提示信息，告知用户添加成功，显示 1800 毫秒，图标为 1 表示成功
                layer.msg("添加成功", { icon: 1, time: 1800 });
                // 刷新表格数据
                table.reload("datalist");
            }
        });
        // 阻止表单的默认提交行为，防止页面刷新
        return false;
    });

    // 监听编辑表单的提交事件，当点击编辑表单的保存按钮时触发
    form.on("submit(editsave)", function (data) {
        // 验证是否上传了图片
        const editItems = $('.edit-item');
        if (editItems.length === 0) {
            layer.msg("必须上传图片");
            return false;
        }

        // 提取表单中的基本数据
        const formData = data.field;
        const name = formData.name;
        const id = formData.id;
        const description = formData.description;
        const price = formData.price;
        const stock = formData.stock;
        const category_id1 = formData.category_id1;
        const category_id2 = formData.category_id2;


        // 整理图片数据
        const imgUrls = [];
        editItems.each(function () {
            const imgSrc = $(this).find('.upload-img').attr('src');
            const isMain = $(this).find('input[name="ismain"]').val();
            imgUrls.push({
                imgurl: imgSrc,
                is_main: parseInt(isMain)
            });
        });


        // 构造最终要发送的数据对象
        const finalData = {
            id:id,
            name: name,
            description: description,
            price: price,
            stock: stock,
            category_id1: category_id1,
            category_id2: category_id2,
            imgurl: imgUrls
        };



        // 发送 AJAX 请求，将表单数据提交到服务器的新增分类接口
        $.ajax({
            url: 'product/edit',
            type:'POST',
            data: JSON.stringify(finalData), // 将数据转换为 JSON 字符串
            contentType: 'application/json', // 设置请求头为 JSON 格式
            success: function (result) {
                // 关闭所有弹出层
                layer.closeAll();
                // 弹出提示信息，告知用户添加成功，显示 1800 毫秒，图标为 1 表示成功
                layer.msg("添加成功", { icon: 1, time: 1800 });
                // 刷新表格数据
                table.reload("datalist");
            }
        });
        // 阻止表单的默认提交行为，防止页面刷新
        return false;
    });

    // 监听新增表单取消按钮的点击事件，当点击取消按钮时触发
    $('#addcancel').on('click', function () {
        // 关闭所有弹出层
        layer.closeAll();
        $("[name='image-container']").empty();
    });

    // 监听编辑表单取消按钮的点击事件，当点击取消按钮时触发
    $('#editcancel').on('click', function () {
        // 关闭所有弹出层
        layer.closeAll();
        $("[name='image-container']").empty();
    });

    // 自定义表单验证规则，用于验证图片是否上传
    // 自定义表单验证规则，用于验证图片是否上传
    form.verify({
        shopimg: function () {
            const price = $('#addWin [name = "price"]').val();
            const stock = $('#addWin [name = "stock"]').val();
            if (price < 0){return "价格不能小于0"}
            if (stock <= 0){return "库存不能小于等于0"}

            // 获取所有上传项
            const uploadItems = $('.upload-item');

            var hasImage = false;
            var isMain = false;
            uploadItems.each(function () {
                const imgSrc = $(this).find('.upload-img').attr('src');
                if (imgSrc != 'shopfile/img/icon/uploadimg.png') {
                    hasImage = true;// 找到有图片的项，停止遍历
                }else {
                    hasImage = false;
                    return false;
                }

            });
            uploadItems.each(function () {
                const imgIsMain = $(this).find('input[name="ismain"]').val();
                if (imgIsMain==='1'){
                    isMain = true;
                    return ;
                }
            });
            if (!hasImage || !isMain) {
                return "必须上传图片并且必须选择主要图片";
            }
        },
    });
    form.verify({
        editimg: function () {
            const price = $('#editWin [name = "price"]').val();
            const stock = $('#editWin [name = "stock"]').val();
            if (price < 0){return "价格不能小于0"}
            if (stock <= 0){return "库存不能小于等于0"}

            // 获取所有上传项
            const editItems = $('.edit-item');

            var hasImage = false;
            var isMain = false;
            editItems.each(function () {
                const imgSrc = $(this).find('.upload-img').attr('src');
                if (imgSrc != 'shopfile/img/icon/uploadimg.png') {
                    hasImage = true;// 找到有图片的项，停止遍历
                }else {
                    hasImage = false;
                    return false;
                }

            });
            editItems.each(function () {
                const imgIsMain = $(this).find('input[name="ismain"]').val();
                if (imgIsMain==='1'){
                    isMain = true;
                    return ;
                }
            });
            if (!hasImage || !isMain) {
                return "必须上传图片并且必须选择主要图片";
            }
        },
    })
</script>
</body>
</html>